import React, {
  useRef,
  forwardRef,
  useEffect,
  useImperativeHandle,
} from "react";

// useImperativeHandle的作用就是让函数组件和类组件一样可以在父组件里面拿到子组件的属性和方法

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => {
    return {
      a: 3,
      fn() {
        console.log("fn");
      },
    };
  });

  return <div ref={ref}>child子组件</div>;
});

const App = () => {
  const child = useRef();

  useEffect(() => {
    console.log(child.current);
  }, []);

  return (
    <>
      <h2>useImperativeHandle</h2>
      <Child ref={child} />
    </>
  );
};

export default App;
